<template>
    <div>
        <div style="margin-top: 15px;">
            <el-row :gutter="15">
                <el-form ref="elForm" :model="queryParams" :rules="rules" size="medium" label-width="100px">
                    <el-col :span="5">
                        <el-form-item label="旅客姓名" prop="customerName">
                            <el-input v-model="queryParams.name" placeholder="请输入旅客姓名" clearable
                                :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="13">
                        <el-form-item label="">
                            <el-button type="primary" icon="el-icon-search" size="medium" @click="selectCustomer">
                                检索</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="">
                            <el-button type="primary" size="medium" @click="dialogFormVisible = true"> 新增 </el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="">
                            <el-button type="primary" size="medium" @click="deleteMany"> 删除 </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <div>
            <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="id" align="center" prop="id" />
                <el-table-column label="姓名" align="center" prop="name" />
                <el-table-column label="性别" align="center" prop="sex" />
                <el-table-column label="手机号" align="center" prop="phone" />
                <el-table-column label="出生日期" align="center" prop="birthday" />
                <el-table-column label="民族" align="center" prop="nation" />
                <el-table-column label="旅客级别" align="center" prop="customerRange.name" />
                <el-table-column label="证件类型" align="center" prop="customerIdType.name" />
                <el-table-column label="证件号码" align="center" prop="idcard" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="deleteOne(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination :page-size=8 :pager-count="pageInfo.pageCount" layout="prev, pager, next"
                :total="pageInfo.total" :current-page="pageInfo.currentPage" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <!-- 新增对话框 -->
        <div>
            <el-dialog title="新增旅客信息" :visible.sync="dialogFormVisible">
                <el-form ref="elForm" :model="addForm" :rules="rules" size="medium" label-width="100px">
                    <el-form-item label="旅客姓名" prop="name">
                        <el-input v-model="addForm.name" placeholder="请输入旅客姓名旅客姓名" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="addForm.sex" size="medium">
                            <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="旅客电话" prop="phone">
                        <el-input v-model="addForm.phone" placeholder="请输入旅客电话" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="生日" prop="birthday">
                        <el-date-picker v-model="addForm.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="生日生日" clearable></el-date-picker>
                    </el-form-item>
                    <el-form-item label="民族" prop="nation">
                        <el-input v-model="addForm.nation" placeholder="民族" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型" prop="idType">
                        <el-radio-group v-model="addForm.idType" size="medium">
                            <el-radio v-for="(item, index) in idTypeOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="证件号" prop="idcard">
                        <el-input v-model="addForm.idcard" placeholder="请输入证件号" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="旅客等级" prop="crange">
                        <el-radio-group v-model="addForm.crange" size="medium">
                            <el-radio v-for="(item, index) in crangeOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item size="large">

                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button type="primary" @click="submitAddForm">提交</el-button>
                </div>
            </el-dialog>
        </div>
        <!--  修改对话框 -->
        <div>
            <el-dialog title="编辑旅客信息" :visible.sync="dialogFormVisible2">
                <el-form ref="elForm" :model="updateForm" :rules="rules" size="medium" label-width="100px">
                    <el-form-item label="旅客id" prop="id">
                        <el-input v-model="updateForm.id" placeholder="旅客id" clearable :style="{ width: '100%' }" :disabled="true">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="旅客姓名" prop="name">
                        <el-input v-model="updateForm.name" placeholder="请输入旅客姓名" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="updateForm.sex" size="medium">
                            <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="旅客电话" prop="phone">
                        <el-input v-model="updateForm.phone" placeholder="请输入旅客电话" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="生日" prop="birthday">
                        <el-date-picker v-model="updateForm.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="生日生日" clearable></el-date-picker>
                    </el-form-item>
                    <el-form-item label="民族" prop="nation">
                        <el-input v-model="updateForm.nation" placeholder="民族" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型" prop="idType">
                        <el-radio-group v-model="updateForm.idType" size="medium">
                            <el-radio v-for="(item, index) in idTypeOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="证件号" prop="idcard">
                        <el-input v-model="updateForm.idcard" placeholder="请输入证件号" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="旅客等级" prop="crange">
                        <el-radio-group v-model="updateForm.crange" size="medium">
                            <el-radio v-for="(item, index) in crangeOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item size="large">

                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="submitUpdate">提 交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { addCustomer, deleteCustomer, deleteCustomers, listCustomers, updateCustomer } from '../../../api/shx/checkIn/checkIn';

export default {
    data() {
        return {
            dialogFormVisible2:false,
            addForm: {
                name: undefined,
                sex: undefined,
                phone: undefined,
                birthday: null,
                nation: undefined,
                idType: undefined,
                idcard: undefined,
                crange: undefined,
                del: 0
            },
            updateForm: {
                id:undefined,
                name: undefined,
                sex: undefined,
                phone: undefined,
                birthday: undefined,
                nation: undefined,
                idType: undefined,
                idcard: undefined,
                crange: undefined,
            },
            deleteForm: {
                id: undefined
            },
            deletesForm: {
                ids: []
            },
            dialogFormVisible: false,
            pageInfo: {
                currentPage: undefined,
                total: undefined,
                pageCount: undefined,
            },
            queryParams: {
                name: undefined,
                pageNum: 1,
                pageSize: 8
            },
            customerList: [],
            rules: {
                customerName: [{
                    required: true,
                    message: '请输入旅客姓名',
                    trigger: 'blur'
                }],
                name: [{
                    required: true,
                    message: '请输入旅客姓名旅客姓名',
                    trigger: 'blur'
                }],
                sex: [{
                    required: true,
                    message: '性别不能为空',
                    trigger: 'change'
                }],
                phone: [{
                    required: true,
                    message: '请输入旅客电话',
                    trigger: 'blur'
                }],
                birthday: [{
                    required: true,
                    message: '生日生日',
                    trigger: 'change'
                }],
                nation: [{
                    required: true,
                    message: '民族',
                    trigger: 'blur'
                }],
                idType: [{
                    required: true,
                    message: '证件类型不能为空',
                    trigger: 'change'
                }],
                idcard: [{
                    required: true,
                    message: '请输入证件号',
                    trigger: 'blur'
                }],
                crange: [{
                    required: true,
                    message: '旅客等级不能为空',
                    trigger: 'change'
                }],
            },
            sexOptions: [{
                "label": "男",
                "value": "男"
            }, {
                "label": "女",
                "value": "女"
            }],
            idTypeOptions: [{
                "label": "居民身份证",
                "value": 1
            }, {
                "label": "护照",
                "value": 2
            }],
            crangeOptions: [{
                "label": "首次",
                "value": 1
            }, {
                "label": "常客",
                "value": 2
            }],

        }
    },
    created() {
        this.getCustomerList()
    },
    methods: {
        // 勾选选框事件
        handleSelectionChange(selectedRows) {
            this.deletesForm.ids = [];
            console.log("---------------");
            if (selectedRows.length > 0) {
                for (var i = 0; i < selectedRows.length; i++) {
                    this.deletesForm.ids[i] = selectedRows[i].id;
                }
            }

            console.log(this.deletesForm.ids);
        },
        // 删除单条记录
        async deleteOneCustomer() {
            await deleteCustomer(this.deleteForm).then(res => {
                console.log(res);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
            this.getCustomerList()
        },
        // 删除多条记录
        async deleteManyCustomer() {
            // this.deletesForm.ids= JSON.stringify(this.deletesForm.ids)
            // const formData = new FormData();
            // this.deletesForm.ids.forEach((id, index) => {
            //     formData.append(`ids[${index}]`, id);
            // });
            const str = this.deletesForm.ids.join(',');
            this.deletesForm.ids = str;
            await deleteCustomers(this.deletesForm).then(res => {
                console.log(res);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
            this.getCustomerList()
        },
        // 确认删除删除单个
        async deleteOne(row) {
            console.log("点击删除");
            this.deleteForm.id = row.id
            this.$confirm('此操作将删除该旅客信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteOneCustomer()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 确认删除多个
        async deleteMany() {
            console.log("点击删除");
            this.$confirm('此操作将删除所选旅客信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteManyCustomer()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 处理编辑
        handleUpdate(row){
            this.dialogFormVisible2=true
            console.log(row);
            this.updateForm={
                id:row.id,
                name: row.name,
                sex: row.sex,
                phone: row.phone,
                birthday: row.birthday,
                nation: row.nation,
                idType: row.idType,
                idcard: row.idcard,
                crange: row.crange,
            };
        },
        // 提交修改
        submitUpdate(){
            console.log("提交修改");
            console.log(this.updateForm);
            this.$confirm('此操作将修改旅客信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.update()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            this.dialogFormVisible2 =false
        },
        // 请求修改

        async update(){
            await updateCustomer(this.updateForm).then(res=>{
                console.log(res);
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            })
            this.getCustomerList();
        },


        // 提交add表单
        async submitAddForm() {
            console.log("提交add表单");
            console.log(this.addForm);
            await addCustomer(this.addForm).then(res => {
                console.log(res);
                this.$message({
                    message: '新增成功',
                    type: 'success'
                });
            });
            this.getCustomerList()
            this.addForm = {
                name: undefined,
                sex: undefined,
                phone: undefined,
                birthday: null,
                nation: undefined,
                idType: undefined,
                idcard: undefined,
                crange: undefined,
                del: 0
            },
                this.dialogFormVisible = false
        },
        // 重置add表单
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        getCustomerList() {
            listCustomers(this.queryParams).then(response => {
                console.log(response);
                this.customerList = response.data.list;
                this.pageInfo.pageCount = response.data.pages;
                this.pageInfo.total = response.data.total;
            })
        },
        selectCustomer() {
            console.log("点击搜索");
            listCustomers(this.queryParams).then(response => {
                console.log(response);
                this.customerList = response.data.list;
                this.pageInfo.pageCount = response.data.pages;
                this.pageInfo.total = response.data.total;
                this.currentPage = 1;
            })
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryParams.pageNum = val
            listCustomers(this.queryParams).then(response => {
                console.log(response);
                this.customerList = response.data.list;
                this.pageInfo.pageCount = response.data.pages;
                this.pageInfo.total = response.data.total;
                this.currentPage = 1;
            })
        },
    }


}

</script>